<template>
  <div class="add">
    <Header>
      <template v-slot:left>
        <span @click="goto()">&lt;新增地址</span>
      </template>
      <template v-slot:right>
        <span>...</span>
      </template>
    </Header>
    <div class="list">
      <div class="name">
        姓名：
        <input type="text" v-model="name" />
      </div>
      <div class="phone">
        电话：
        <input type="text" v-model="phone" />
      </div>
      <div class="address">
        地址：
        <input type="text" v-model="address" />
      </div>
      <div class="housenum">
        门牌号：
        <input type="text" v-model="housenum" />
      </div>
      <div class="btn">
        <div class="save" @click="saveaddress()">保存</div>
        <div class="cancel" @click="goto()">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Header from "../../../components/Header";
export default {
  data() {
    return {
      name: "",
      phone: "",
      address: "",
      housenum: "",
      id: ""
    };
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["addAddress"]),
    saveaddress() {
      this.$router.push({ name: "wodedz" }),
        this.addAddress({
          name: this.name,
          phone: this.phone,
          address: this.address,
          housenum: this.housenum,
          id: new Date() * 1
        });
    },
    goto() {
      this.$router.push({ name: "wodedz" });
    }
  }
};
</script>

<style>
</style>